<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>lulu的BLOG</title>
  <link rel="stylesheet" type="text/css" href="<?php echo __CSS__;?>/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="<?php echo __CSS__;?>/nprogress.css">
  <link rel="stylesheet" type="text/css" href="<?php echo __CSS__;?>/style.css">
  <link rel="stylesheet" type="text/css" href="<?php echo __CSS__;?>/font-awesome.min.css">
  <link rel="apple-touch-icon-precomposed" href="<?php echo __IMAGES__;?>/icon/icon.png">
  <link rel="shortcut icon" href="<?php echo __IMAGES__;?>/icon/favicon.ico">
  <script src="<?php echo __JS__;?>/jquery-2.1.4.min.js"></script>
  <script src="<?php echo __JS__;?>/nprogress.js"></script>
  <script src="<?php echo __JS__;?>/jquery.lazyload.min.js"></script>
  <link rel="stylesheet" href="<?php echo __ALIB__;?>/layui/css/layui.css">
  <!--[if gte IE 9]>
  <script src="<?php echo __JS__;?>/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="<?php echo __JS__;?>/html5shiv.min.js" type="text/javascript"></script>
  <script src="<?php echo __JS__;?>/respond.min.js" type="text/javascript"></script>
  <script src="<?php echo __JS__;?>/selectivizr-min.js" type="text/javascript"></script>
  <![endif]-->
  <!--[if lt IE 9]>
  <script>window.location.href='/index.php/home/index/ieBrowser';</script>
  <![endif]-->
  <style>
    .getcode {
      font-size: 0.22rem;
      background: linear-gradient(180deg, rgba(114, 190, 237, 1), rgba(150, 207, 243, 1));
      border-radius: 0.23rem;
      color: #fff;
      padding: 0.08rem .2rem;
      text-align: center;
      margin-bottom: .1rem;
    }
    .hasTypeCode {
      font-size: 0.22rem;
      background-color: grey;
      border-radius: 0.23rem;
      color: #fff;
      padding: 0.08rem .2rem;
      text-align: center;
      margin-bottom: .1rem;
    }
    /*密码强度*/
    #passStrength{height:11px;width:120px;border:1px solid #ccc;padding:2px;margin-top: 10px;}
    .strengthLv1{background:red;height:11px;width:40px;}
    .strengthLv2{background:orange;height:11px;width:80px;}
    .strengthLv3{background:green;height:11px;width:120px;}
    .strcolor3{color:green}
    .strcolor2{color:orange}
    .strcolor1{color:red}
    .strcolor0{color:red}
  </style>
</head>

<body class="user-select">
<header class="header">
  <nav class="navbar navbar-default" id="navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="<?php echo __IMAGES__;?>/logo.png" alt=""></a></h1>
      </div>
      <div class="collapse navbar-collapse" id="header-navbar">
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden-index active"><a href="/home/index/list">LuLu的首页</a></li>
          <?php foreach($cat_res as $v){ ?>
          <li><a href="/home/index/category?cat_id=<?php echo $v['id']; ?>"><?php echo $v['cat_name']; ?></a></li>
          <?php } ?>
        </ul>

      </div>
    </div>
  </nav>
</header>
<section class="container container-page">
  <div class="content">
    <header class="article-header">
      <h1 class="article-title">新用户注册</h1>
    </header>
    <div style="width: 560px;margin: 10px auto;">
      <form class="layui-form">
        <div class="layui-form-item">
          <label for="username" class="layui-form-label">
            <span class="x-red">*</span>登录名
          </label>
          <div class="layui-input-inline">
            <input type="text" id="username" name="username" required="" lay-verify="required"
                   autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>将会成为您唯一的登入名
          </div>
        </div>
        <div class="layui-form-item">
          <label for="phone" class="layui-form-label">
            <span class="x-red">*</span>手机
          </label>
          <div class="layui-input-inline">
            <input type="text" id="phone" name="phone"
                   autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span >*一个手机号仅支持注册一个账号</span>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_email" class="layui-form-label">
            <span class="x-red">*</span>验证码
          </label>
          <div class="layui-input-inline"  style="width: 100px;">
            <input type="text" id="verify_code" autocomplete="off" class="layui-input">
          </div>
          <div class=" layui-word-aux">
            <span class="layui-btn getcode" id="getcode" onclick="toget()">获取验证码 <span style="display: none" id="seconds"><span class="seconds">60</span>秒</span></span>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_email" class="layui-form-label">
            <span class="x-red">*</span>邮箱
          </label>
          <div class="layui-input-inline">
            <input type="text" id="email" name="email"
                   autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span style="color:red;">*注:该邮箱将用于找回密码,请谨慎填写</span>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><span class="x-red">*</span>昵称</label>
          <div class="layui-input-inline">
            <input type="text" id="nick" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span >*评论时展示(不可更改)</span>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_pass" class="layui-form-label">
            <span class="x-red">*</span>密码
          </label>
          <div class="layui-input-inline">
            <input type="password" id="password" autocomplete="off" class="layui-input">
          </div>
          <div style="position: relative;display: inline-block;height: 33px;">
            <label style="position: absolute;top: 8px;color: grey;">密码强度</label>
            <div style="margin-left: 60px;display: inline-block;">
              <div id="passStrength"></div>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label" style="width: 100px;margin-left: -19px;">
            <span class="x-red">*</span>确认密码
          </label>
          <div class="layui-input-inline">
            <input type="password" id="re_password"
                   autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
          </label>
          <label class="layui-btn" onclick="register()" id="sure">
            保存
          </label>
        </div>
      </form>
    </div>
  </div>
</section>
<footer class="footer">
  <div class="container">
    <p>&copy; 2019 <a href="">990527551@qq.com</a> &nbsp; </p>
  </div>
  <div id="gotop"><a class="gotop"></a></div>
</footer>

<div id="rightClickMenu">
  <ul class="list-group rightClickMenuList">
    <li class="list-group-item disabled">欢迎访问LuLu的BLOG</li>
    <li class="list-group-item"><span>IP：</span><?php echo getIp(); ?></li>
    <li class="list-group-item"><span>地址：</span><?php echo getIpAddress(); ?></li>
    <li class="list-group-item"><span>系统：</span><?php echo php_uname('s'); ?> </li>
    <!--<li class="list-group-item"><span>浏览器：</span>Chrome47</li>-->
  </ul>
</div>
<script src="<?php echo __JS__;?>/bootstrap.min.js"></script>
<script src="<?php echo __JS__;?>/scripts.js"></script>
<script src="<?php echo __ALIB__;?>/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo __AJS__;?>/xadmin.js"></script>
<script>
    //注册
    function register() {
        var account = $("#username").val();
        var phone = $('#phone').val();
        var verify_code = $("#verify_code").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var re_password = $("#re_password").val();
        var nick = $("#nick").val();
        if (account.length<3){
            layer.msg('登录名不能少于三个字符');
            $('#username').focus();
            return false;
        }else{
            if (!/^[a-zA-Z0-9_]{3,}$/.test(account)){
                layer.msg('登录名仅支持数字字母和_');
                $('#username').focus();
                return false;
            }
        }
        var myreg=/^1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/;
        if (phone.length<1){
            layer.msg('请输入手机号');
            $('#phone').focus();
            return false;
        }else {
            if (!myreg.test(phone)) {
                layer.msg('手机号格式有误，请重输');
                $('#phone').focus();
                return false;
            }
        }
        if (verify_code.length<1){
            layer.msg('请输入手机验证码');
            $('#verify_code').focus();
            return false;
        }
        if (email.length<1){
            layer.msg('请输入邮箱');
            $('#email').focus();
            return false;
        }else{
            if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*(\.)[a-zA-Z]{2,3}$/.test(email)){
                layer.msg('邮箱不合法');
                $('#email').focus();
                return false;
            }
        }
        if (password.length<1){
            layer.msg('请输入密码');
            $('#password').focus();
            return false;
        }else{
            if (password.length>50){layer.msg('密码太长了');return false;}
            if (!/^[a-zA-Z0-9_~!@#$%&*,.?]+$/.test(password)){
                layer.msg('密码不合法');
                $('#password').focus();
                return false;
            }
        }
        if (re_password.length<1){
            layer.msg('请输入确认密码');
            return false;
        }else{
            if (re_password != password){
                layer.msg('两次密码不一样');
                return false;
            }
        }
        $.post("/home/index/registerNew",{account:account,phone:phone,verify_code:verify_code,email:email,nick:nick,password:password}, function (res) {
            if (res.code==500){
                layer.alert(res.data, {
                    icon: 5
                });
            }else{
                layer.msg(res.data, {icon: 1, time: 1000});
                window.setTimeout("redirect()",1000);
            }
        }, 'json');
    }

    function redirect() {
        window.location.href ="/home/index/list"
    }

    // 获取验证码
    var clickFlag = true;
    function toget() {
        var phone = $('#phone').val();
        var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if(!myreg.test(phone)){
            layer.msg('手机号格式有误，请重输');
            $('#phone').focus();
            return false;
        }
        $('#getcode').removeAttr('onclick');
        $("#seconds").attr('style','display:inline-block');
        $('#getcode').addClass('hasTypeCode').removeClass('getcode');
        var secondsSum = $('.seconds').text();
        if (clickFlag) {
            clickFlag = false;
            $.ajax({
                url: "/home/index/getVerifyCode",
                type: "post",
                data: {phone:phone},
                dataType: 'json',
                success: function (res) {
                    if (res.code==200) {
                        layer.alert(res.data, {icon: 6})
                    }else{
                        layer.alert(res.data, {icon: 5})
                        clearInterval(timer);
                        $('.seconds').html('60');
                        $('#getcode').addClass('getcode').removeClass('hasTypeCode');
                        $("#seconds").attr('style','display:none');
                        $('#getcode').attr('onclick',"toget()");
                        clickFlag = true;
                    }
                }
            });
            var timer = setInterval(function () {
                if (secondsSum === 0) {
                    clearInterval(timer);
                    $('.seconds').html('60');
                    $('#getcode').addClass('getcode').removeClass('hasTypeCode');
                    $("#seconds").attr('style','display:none');
                    $('#getcode').attr('onclick',"toget()");
                    clickFlag = true;
                } else {
                    secondsSum--;
                    $('.seconds').html(secondsSum)
                }
            }, 1000)
        }
    }
</script>
<!--密码强度-->
<script type="text/javascript">
    PasswordStrength('password','passStrength');

    function PasswordStrength(passwordID,strengthID){
        init_prototype(strengthID);
        var _this = this;
        document.getElementById(passwordID).onkeyup = function(){
            checkStrength(this.value);
        }
    };
    function init_prototype(strengthID){
        var id = document.getElementById(strengthID);
        var div = document.createElement('div');
        var strong = document.createElement('strong');
        this.oStrength = id.appendChild(div);
        this.oStrengthTxt = id.parentNode.appendChild(strong);
    };
    function checkStrength(val){
        var aLvTxt = ['强度很低','强度较低','中等强度','密码很强'];
        var lv = 0;
        if(val.match(/[a-z]/g)){lv++;}
        if(val.match(/[0-9]/g)){lv++;}
        if(val.match(/(.[^a-z0-9])/g)){lv++;}
        if(val.length < 5){lv=0;}
        if(lv > 3){lv=3;}
        if (lv != 0){
            lv = lv<2 ? val.length<7?1:2 : lv<3 ? val.length<7?2:3 : val.length<7?2:3;
        }
        this.oStrength.className = 'strengthLv' + lv;
        this.oStrengthTxt.innerHTML = aLvTxt[lv];
        this.oStrengthTxt.className='strcolor' + lv;

    };
</script>
</body>
</html>